<template>
    <section id="checklist">
      <p style="margin-top: 30px;height: 60px;line-height: 60px;font-size: 14px;font-weight: bold;color: gray;"> 请选择您擅长癌种，最多可选6个</p>
      <div style="width: 88%;margin-left: 5%;">
        <mt-checklist
          :max="6"
          v-model="value"
          align="left"
          :options="options">
        </mt-checklist>
      </div>
      <p class="next" @click="next">下一步</p>
    </section>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
        props: [],
        name: 'app',
        data(){
            return {
              value:['肺癌'],
              options : [
                  {label: '肺癌', value: '肺癌'},
                  {label: '肝癌', value: '肝癌'},
                  {label: '胃癌', value: '胃癌'},
                  {label: '肠癌', value: '肠癌'},
                 {label: '肾癌', value: '肾癌'},
                {label: '脑癌', value: '脑癌'},
                {label: '脂肪癌', value: '脂肪癌'},
                  {label: '黑素癌', value: '黑素癌'},
                  {label: '血管癌', value: '血管癌'},
                  {label: '胸腺癌', value: '胸腺癌'},
                  {label: '白血病', value: '白血病'},
                  {label: '卵巢癌', value: '卵巢癌'},
                  {label: '食道癌', value: '食道癌'},
                  {label: '淋巴癌', value: '淋巴癌'},
              ],
            }
        },
        computed: {},
        components: {},
        created(){
        },
        watch:{
          value:function(oldV,newV){
              console.log(this.value);
          }
        },
        methods: {
          next(){
              if(this.value.length>0&&this.value.length<=6){
                this.$router.push("/authenticationdata");
                localStorage.setItem("GoodATCancer",this.value);
              }
              else{
                Toast({
                  message: '填写完整信息',
                  position: 'middle',
                  duration: 1000
                });
              }
          }
        },
        mounted() {
        },
        destroyed(){
        }
    }
</script>

<style lang="scss" scoped>
  section{
    background-color: white;
  }
  .next{
    width: 90%;
    height: 40px;
    position: fixed;
    bottom:40px;
    left:5%;
    border-radius: 5px;
    color: white;
    text-align: center;
    line-height: 45px;
    letter-spacing: 3px;
    background-color: rgba(0, 146, 252, 0.5);
  }
</style>
